/**

自动绘制圆圈
*/
<template>
    <div>
        <div ref="map" id="map"></div>
        <div id="anchor"><i class="el-icon-location" style="font-size: 30px;color: #1183FB;"></i></div>
    </div>
</template>

<script>
    import "ol/ol.css";
    import {Map, Feature, View, Overlay} from "ol";
    // import {Sphere} from "ol/sphere";
    import XYZ from "ol/source/XYZ";
    import VectorSource from "ol/source/Vector";
    import {Vector as CircleLayer} from "ol/layer";
    import TileLayer from "ol/layer/Tile";
    import {Fill, Stroke, Style} from "ol/style";
    import {circular} from 'ol/geom/Polygon';
    import {fromLonLat} from "ol/proj";
    import {
        ZoomSlider,
        defaults as defaultControls,
        ScaleLine,
        ZoomToExtent,
        FullScreen
    } from "ol/control";

    export default {
        name: "DrawCircleApp",
        data() {
            return {
                map: null,
            };
        },
        mounted() {
            // 创建地图
            this.createMap();
            this.drawCircle([110.26499613189635, 39.04069115959665], 2);
        },
        methods: {
            //绘制围栏  80.12 30.23  ,半径km
            drawCircle(site, radius) {
                let features = []
                //最准确的绘制圆圈方法
                let circle4326 = circular(site, radius * 1000, 64)
                let circle3857 = circle4326.clone().transform('EPSG:4326', 'EPSG:3857')

                // const coordm = fromLonLat(site);
                // let circleGeom = new Circle(coordm, radius * 1000);//画圆
                // console.log('circleGeom;  ', coordm, '  ', circleGeom)
                let circleGeom = circle3857;

                let feature = new Feature({
                    geometry: circleGeom,
                });
                // 分开来设置 style
                feature.setStyle(new Style({
                    fill: new Fill({ //填充颜色
                        color: "rgba(255, 255, 255, 0.2)",
                        width: 5
                    }),
                    stroke: new Stroke({ // 边缘颜色
                        color: "rgb(255,0,0)",
                        width: 5
                    }),
                }));
                console.log('circle-feature:  ', feature);

                features.push(feature)// 新建Feature对象 并将circle传入
                var source = new VectorSource()
                source.addFeatures(features)// 将Feature对象填入图层源
                let circleLayer = new CircleLayer({
                    className: 'circleClassName',
                    opacity: 100,
                    source: source,
                })
                circleLayer.setVisible = true;
                this.map.addLayer(circleLayer);// 将图层添至地图对象
                console.log('drawCircle --getLayers:', this.map.getLayers());
            },

            createMap() {
                let centerPoint = [110.26499613189605, 39.04069115959695]

                var gaodeLayer = new TileLayer({
                    source: new XYZ({
                        url: "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
                    })
                });
                console.log('map:  ', gaodeLayer)

                this.map = new Map({
                    target: "map",
                    view: new View({
                        center: fromLonLat(centerPoint),
                        zoom: 12,
                        projection: "EPSG:3857",
                    }),
                    layers: [
                        gaodeLayer,
                    ],
                    controls: defaultControls().extend([ // 控件
                        new FullScreen(),
                        new ScaleLine(),
                        new ZoomSlider(),
                        new ZoomToExtent(),
                    ]),
                });

                let anchor = new Overlay({
                    element: document.getElementById('anchor')
                });
                anchor.setPosition(fromLonLat(centerPoint));
                this.map.addOverlay(anchor)

                this.map.getView().animate({
                    center: fromLonLat(centerPoint),
                    duration: 1000,
                })// 动画 将地址移动到视图中心
            },
        }
    };
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    /*移除OSM的链接*/
    :deep(.ol-attribution) {
        display: none;
    }
</style>